<!-- 我是订单 -->
<template lang="html">
  <div class="goodsBox">
    <el-row class="bg-white">
      <el-col :span="2" >
        <div :class="goodsTab==1?'goodsList active':'goodsList'" @click="tabList(1)">
          所有订单
        </div>
      </el-col>
      <el-col :span="2">
        <div :class="goodsTab==2?'goodsList active':'goodsList'" @click="tabList(2)">
          预约订单
        </div>
      </el-col>
      <el-col :span="2">
        <div :class="goodsTab==3?'goodsList active':'goodsList'" @click="tabList(3)">
          OTA订单
        </div>
      </el-col>
      <!-- <el-col :span="2">
        <div :class="goodsTab==4?'goodsList active':'goodsList'" @click="tabList(4)">
          自营订单
        </div>
      </el-col> -->
      <el-col :span="2">
        <div :class="goodsTab==5?'goodsList active':'goodsList'" @click="tabList(5)">
          退款订单
        </div>
      </el-col>
    </el-row>
    <el-row>
      <router-view> </router-view>
    </el-row>
    <el-dialog size="small" :title="$store.state.TanGoods.title" :visible.sync="$store.state.TanGoods.TanVisible">
      <v-success v-if="$store.state.TanGoods.TanType==1"></v-success>
      <v-error v-if="$store.state.TanGoods.TanType==2"></v-error>
      <v-back v-if="$store.state.TanGoods.TanType==3"></v-back>
      <v-hotel v-if="$store.state.TanGoods.TanType==4"></v-hotel>
      <v-yuyue v-if="$store.state.TanGoods.TanType==5"></v-yuyue>
      <v-push v-if="$store.state.TanGoods.TanType==6"></v-push>
      <v-getGoods v-if="$store.state.TanGoods.TanType==7"></v-getGoods>
    </el-dialog>


  </div>
</template>

<script>
import success from "./successOrder.vue"
import error from "./errorOrder.vue"
import back from "./backOrder.vue"
import hotel from "./hotelOrder.vue"
import yuyue from "./yuyueOrder.vue"
import push from "./push.vue"
import getGoods from "./getGoods.vue"

export default {
  data(){
    return {
      goodsTab: 1
    }
  },
  methods: {
    tabList:function (n){
      var that=this;
      that.goodsTab=n;
      switch (n) {
        case 1:
          that.$router.push({path:'/goods/allGoods'});
          break;
        case 2:
          that.$router.push({path:'/goods/yuyue'});
          break;
        case 3:
          that.$router.push({path:'/goods/goodsOTA'});
          break;
        case 4:
          that.$router.push({path:'/goods/goodsSelf'});
          break;
        case 5:
          that.$router.push({path:'/goods/goodsBack'});
          break;
        default:
          break;
      }
      //console.log(this.goodsTab);
    }
  },
  components:{
    'v-success':success,
    'v-error':error,
    'v-back':back,
    'v-hotel':hotel,
    'v-yuyue':yuyue,
    'v-push':push,
    'v-getGoods':getGoods
  },
  watch:{
    $route:function (){
      var that = this;
      switch (that.$route.path) {
        case '/goods/allGoods':
          that.goodsTab=1;
          break;
        case '/goods/yuyue':
          that.goodsTab=2;
          break;
        case '/goods/goodsOTA':
          that.goodsTab=3;
          break;
        case '/goods/goodsBack':
          that.goodsTab=5;
          break;
        default:
      }
    }
  },
  created(){
    var that = this;
    switch (that.$route.path) {
      case '/goods/allGoods':
        that.goodsTab=1;
        break;
      case '/goods/yuyue':
        that.goodsTab=2;
        break;
      case '/goods/goodsOTA':
        that.goodsTab=3;
        break;
      case '/goods/goodsBack':
        that.goodsTab=5;
        break;
      default:
    }

    this.$store.state.index='3';
  }
}
</script>

<style lang="Sass">
    .goodsBox{
      .headLable{width: 80px;}
    }
</style>
<style lang="Sass" scoped>
  .goodsBox{ height: 100%; background: #F7F8FC;

    .goodsList{height: 40px; line-height: 40px; width: 80px; box-sizing: border-box; margin: 0 auto; cursor: pointer;}
    .goodsList:hover{border-bottom: 4px solid #13CE66;}
    .active{border-bottom: 4px solid #13CE66;}
  }
  .bg-white{background: #fff;}
</style>
